/*用户的增删改查综合案例（以下是要实现的功能步骤）*/
// 1、搭建服务器，实现客户端与服务器端的通信
// 2、连接数据库，创建用户集合，向集合中插入文档
// 3、当用户访问/list时，将所有用户信息查询出来: 
	// （3.1）实现路由能；
	// （3.2）呈现用户界功面；
	// （3.3）从数据库中查询用户信息，将用户信息展示在列表中
// 4、将用户信息和表格html进行拼接并将拼接结果响应给客户端
// 5、当用户访问/add时，呈现表单页面，并实现添加用户信息的功能
// 6、当用户访问/modify时，呈现表单页面，并实现修改用户信息的功能
	// 修改用户信息分两大步骤
		// 6.1增加页面路由 呈现页面
			// （1）再点击修改按钮的时候 将用户ID传递到当前页面
			// （2）从数据库中查询当前用户信息 将用户信息展示到页面中
		// 6.2实现用户修改功能	
// 7、当用户访问/delete时，实现用户删除功能

/*具体代码如下*/
// 1、搭建服务器，实现客户端与服务器端的通信
// 1.1引入系统模块创建服务器对象
const http = require("http");
let web = http.createServer();
// 3、当用户访问/list时，将所有用户信息查询出来
let url = require("url");

let mime = require("mime");
let path = require("path");
// 5、当用户访问/add时，呈现表单页面，并实现添加用户信息的功能
const querystring=require("querystring");
// 6、当用户访问/modify时，呈现表单页面，并实现修改用户信息的功能
// 7、当用户访问/delete时，实现用户删除功能

// 2、连接数据库，创建用户集合，向集合中插入文档
// 2.1导入第三方模块连接数数据库(利用模块化开发引入)
require("./model/index.js");
// 2.2创建集合的构造函数(利用模块化开发引入)
const user=require("./model/user.js");

// 2.4创建并且插入文档
// user.create({name:"",age:56,password:5555555,email:"555555555@qq.com",hobbies:["打豆豆","打架","下棋"]})
// .then((result)=>console.log(result)).catch((err)=>{console.log(err,"文档插入失败")});

// 1.2创建服务器响应事件处理程序
// 响应报头设置
web.on("request",async(req,res)=>{
	// （3.1）实现路由功能
	let method =req.method.toLowerCase();
	let {pathname,query} = url.parse(req.url,true);
	let realpath =path.join(__dirname,pathname);
	let type=mime.getType(realpath);

	if (method=="get") {
		// （3.2）呈现用户界面
		if(pathname=="/list"){
			let users=await user.find();
			// console.log(users);
			// 4、将用户信息和表格html进行拼接并将拼接结果响应给客户端
			res.writeHead(200,{
					"content-type":type
				});
			let list=` 
					<!DOCTYPE html>
					<html lang="en">
					<head>
						<meta charset="UTF-8">
						<title>列表页面</title>
						<style>
						*{
						margin: 0;
						padding: 0;
						list-style-type: none;
						text-decoration: none;
					}

					/*主体 盒子开始*/
					.container{
						position: relative;
						width: 800px;
						height: 500px;
						margin: 50px auto;
						border: 1px solid white;
						
					}
					/*添加用户按钮开始*/
					.container h6{
						width: 80px;
						height: 30px;
					position: absolute;;
					top: 30px;
					left: 50px;
					text-align: center;
					border-radius: 25px;
					line-height: 30px;
						background: green;
					}
					.container h6 a{
						color: white;
						font-size: 14px;
					}

					/*添加用户按钮结束*/
					/*表格主体开始*/

					.table_box{
						width: 650px;
						height:250px; 
						margin:80px auto 0 auto;
						
					}

					.table_box tr{
						display: block;
						float:left;
						width: 760px;
						height: 50px;
						border: 1px solid black;

					}
					.table_box tr td{
						display: block;
						float: left;
						text-align: center;
						line-height: 50px;
						width: 150px;
						height:  50px;
						border: 1px solid black;
					}
					.table_box tr td.email {
						font-size: 10px;
					}
					/*表格主体结束*/
					/*主体 盒子结束*/
						</style>
					</head>
					<body>
						<div class="container">

							<h6><a href="/add">添加用户</a></h6>
							<!-- 表格开始 -->
					<table class="table_box">
						<!-- 第一行表头开始 -->
						<tr class="first_tr">
							<td>用户名</td>
							<td>年龄</td>
							<td>爱好</td>
							<td>邮箱</td>
							<td>操作</td>
						</tr>
						<!-- 第一行表头结束 -->
					`;
			// 对数据进行循环操作
			users.forEach(item=>{
			list +=`
				<tr class="second_tr">
					<td>${item.name}</td>
					<td>${item.age}</td>
					<td>`;
					item.hobbies.forEach( item=>{
						list +=`<span>${item}</span>`;
					})
					list +=`
					</td>
					<td class="email">${item.email}</td>
					<td>
						<a href="/remove?id=${item._id}">删除</a>
						<a href="/modify?id=${item._id}">修改</a>
					</td>
				</tr>`;
			});
			list +=`</table>
							<!-- 表格结束 -->
						</div>
					</body>
					</html>`;
			res.end(list);
			// 5.1当用户访问/add时，呈现add表单页面
		} else if (pathname=="/add") {
		const add=`
			<!DOCTYPE html>
			<html lang="en">
			<head>
				<meta charset="UTF-8">
				<title>添加用户表单</title>
				<style>
			*{
				margin: 0;
				padding: 0;
				text-decoration: none;;
			}
			/*表单主体盒子开始*/
			.container{
				width: 600px;
				height: 600px;
				position: relative;
				margin:50px auto;
				border: 1px solid red;
			}
			.container h3{
				font-weight: 200;
				font-size: 25px;
				margin-bottom: 30px;
			}
			.container form .form_group{
				margin-top: 20px;
			}
			.container form .form_group label{
				display: block;
			margin-left: 30px;

			}
			.container form .form_group .text_box{
				width: 400px;
				height: 20px;
				margin-left: 30px;
			}
			.container form .form_group label.checkbox{
				margin-top: 20px;
				display:inline-block;
			margin-left: 30px;
			}
			.container form .add_btn{
				position: absolute;
				bottom: 150px;
				left: 50px;
				width: 80px;
				height: 30px;
				background: #33cc00;
				border-radius: 25px;
			}
			/*表单主体盒子结束*/
				</style>
			</head>
			<body>
				<!-- 表单主体盒子 -->
				<div class="container">
					<h3>添加用户</h3>
					<!-- 表单开始 -->
					<form method="post" action="/add">
				<div class="form_group">
					<label >用户名</label>
					<input  name="name" type="text" class="text_box">
				</div>
			<div class="form_group">
					<label >密码</label>
					<input name="password" type="text" class="text_box">
				</div>
			<div class="form_group">
					<label >年龄</label>
					<input name="age" type="text" class="text_box">
				</div>
			<div class="form_group">
					<label >邮箱</label>
					<input name="email" type="text" class="text_box">
				</div>
			<div class="form_group">
					<label >请选择您的爱好</label>
					<label class="checkbox">
						<input type="checkbox" name="hobbies" value="睡觉">睡觉
					</label>
					<label class="checkbox">
						<input type="checkbox" name="hobbies" value="汤头">汤头
					</label>
			<label class="checkbox">
						<input type="checkbox" name="hobbies" value="打豆豆">打豆豆
					</label>
					<label class="checkbox">
						<input type="checkbox" name="hobbies" value="敲代码">敲代码
					</label>
					<label class="checkbox">
						<input type="checkbox" name="hobbies" value="看电影">看电影
					</label>
			<label class="checkbox">
						<input type="checkbox" name="hobbies"  value="看书">看书
					</label>
				</div>
			<input type="submit" value="添加用户" class="add_btn">
					</form>
			<!-- 表单结束 -->
				</div>
				<!-- 表单主体盒子结束 -->
			</body>
			</html>
			`;
			res.end(add);
		// 6.1增加页面路由 呈现页面
		}else if(pathname=="/modify"){
		// 根据返回的ID查询出对应的文档信息,并且呈现到 修改页面中
			let modifyuser=await user.findOne({_id:query.id});
			let hobbies=["睡觉","汤头","打豆豆","敲代码","看电影","看书"];
			let modify=`
						<!DOCTYPE html>
						<html lang="en">
						<head>
							<meta charset="UTF-8">
							<title>修改用户表单</title>
							<style>
						*{
							margin: 0;
							padding: 0;
							text-decoration: none;;
						}
						/*表单主体盒子开始*/
						.container{
							width: 600px;
							height: 600px;
							position: relative;
							margin:50px auto;
							border: 1px solid red;
						}
						.container h3{
							font-weight: 200;
							font-size: 25px;
							margin-bottom: 30px;

						}
						.container form .form_group{
							margin-top: 20px;
						}
						.container form .form_group label{
							display: block;
						margin-left: 30px;
						}
						.container form .form_group .text_box{
							width: 400px;
							height: 20px;
							margin-left: 30px;
						}
						.container form .form_group label.checkbox{
							margin-top: 20px;
							display:inline-block;
						margin-left: 30px;

						}
						.container form .add_btn{
							position: absolute;
							bottom: 150px;
							left: 50px;
							width: 80px;
							height: 30px;
							background: #33cc00;
							border-radius: 25px;
						}
						/*表单主体盒子结束*/
						</style>
						</head>
						<body>
							<!-- 表单主体盒子 -->
							<div class="container">
								<h3>修改用户</h3>
								<!-- 表单开始 -->
								<form method="post" action="/modify?id=${modifyuser._id}">
							<div class="form_group">
								<label >用户名</label>
								<input value="${modifyuser.name}" type="text" class="text_box" name="name">
							</div>
						<div class="form_group">
								<label >密码</label>
								<input value="${modifyuser.password}" type="text" class="text_box" name="password">
							</div>
						<div class="form_group">
								<label >年龄</label>
								<input value="${modifyuser.age}" type="text" class="text_box" name="age">
							</div>
						<div class="form_group">
								<label >邮箱</label>
								<input value="${modifyuser.email}" type="text" class="text_box" name="email">
							</div>
						<div class="form_group">
								<label >请选择您的爱好</label>`;
						hobbies.forEach(item => {
								// 判断当前循环项在不在用户爱好数组里
								let isHobbies=modifyuser.hobbies.includes(item);
								if(isHobbies){
									modify +=`
											<label class="checkbox">
												<input type="checkbox" value="${item}" checked>${item}
											</label>
											`;
								}else {
									modify +=` 
											<label class="checkbox">
												<input type="checkbox" value="${item}" >${item}
											</label>
											`;
								}
						});
						modify +=`       
								</div>
								<input type="submit" value="修改用户" class="add_btn">
										</form>
								<!-- 表单结束 -->
									</div>
									<!-- 表单主体盒子结束 -->
								</body>
								</html>
								`;
						res.end(modify);
		}else if (pathname=="/remove") {
			await user.findOneAndDelete({_id:query.id});
			res.writeHead(301,{
				"Location":"/list"
			});
			res.end();
		}
	}else if (method=="post") {
		// 5.2实现用户添加功能
		if (pathname=="/add") {
			// 5.3声明一个变量去接受post参数
			let formData="";
			// 5.4接受post参数
			req.on("data",param=>{
				formData+=param;
			})
			// 5.4接受post参数完毕
			req.on("end",async()=>{
				// 5.5处理已经接受到的post参数
				let newuser=querystring.parse(formData);
				//5.6将处理好的对象形式的post参数存到数据库中
				let result =await user.create(newuser);
				console.log( result);
				//5.7完成用户添加功能，最后表单重定向
				res.writeHead(301,{
					"Location":"/list"
				});
				console.log(res._header);
				res.end();//这句是必须的，不然就代表响应未结束，重定向不会生效
			})
		}else if(pathname=="/modify"){
			let formData="";
			// 接受post参数
			req.on("data",param=>{
				formData +=param;
			})

			// 接受post参数完毕
			req.on("end",async()=>{
				// 处理已经接受到的post参数
				let newuser=querystring.parse(formData);
				// console.log(newuser);
				//将处理好的对象形式的post参数存到数据库中
				console.log(query.id);
				user.updateOne({_id:query.id},newuser).then(result=>{
					console.log(result)
				}).catch(err=>console.log(err));
				//完成用户添加功能，最后表单重定向
				res.writeHead(301,{
					"Location":"/list"
				});
				// console.log(res._header);
				res.end();//这句是必须的，不然就代表响应未结束，重定向不会生效
			})
		}
	}
});
// 1.3创建服务器事件监听
web.listen(3000);
console.log("网站服务器开启成功！");


















